<template>
<ul class="icon-tubiao">
      <li v-for="(item,index) in iconTubiao" :key="item.id" @click="handleClick(index)">
        <i :class="item.icon"></i>
        <span>{{ item.name }}</span>
      </li>
    </ul>
</template>

<script setup>
import { ref } from 'vue'
const iconTubiao = ref([
  { id: 1, name: '卫星', icon: 'iconfont icon-satellite' },
  { id: 2, name: '空气', icon: 'iconfont icon-air' },
  { id: 3, name: '路况', icon: 'iconfont icon-traffic' },
  { id: 4, name: '测距', icon: 'iconfont icon-ruler' },
  { id: 5, name: '地铁', icon: 'iconfonti icon-road' },
  { id: 6, name: '全屏', icon: 'iconfont icon-full' },
])

const drawer = ref(false)
// 传递点击事件
const emit = defineEmits(['satellite'])
function handleClick(index) {
  emit('satellite', index)
  if(index === 3){
    drawer.value = !drawer.value
    // 测距按键切换样式提示
    document.querySelector('li:nth-child(4)').classList.toggle('active')
  }
}

</script>

<style lang="scss" scoped>
  .icon-tubiao {
    position: absolute;
    top: 20px;
    right: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 10px;
    background: #fff;
    color: #666;
    font-size: 13px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    li {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      padding: 0 10px;
      border-right: 1px dotted #ccc;
      &:hover {
        color: #aaa;
      }
      &.active {
        color: rgb(82, 172, 246);
      }
    }
    li:nth-child(6) {
      border: none;
    }
  }
</style>